<!DOCTYPE html>
<html>

<head>
    <meta content="charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="/skin/css/amazeui.min1.css" />
    <link href="/skin/css/icofont.css" rel="stylesheet" type="text/css" />
    <link href="/skin/afonts/iconfont.css" rel="stylesheet" type="text/css" />
    <link href="/skin/css/index.css?v=2.01" rel="stylesheet" type="text/css" />
    <script src="/skin/js/jquery.js"></script>
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <title>{$sys[webname]}</title>
    <style>
        /* 启动页样式 */
        body.launch-lock {
            overflow: hidden;
            height: 100vh;
        }

        .launch-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.85) 45%, #000 100%);
            color: #fff;
            z-index: 3000;
            display: flex;
            flex-direction: column;
            opacity: 1;
            transform: scale(1);
            transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out, visibility 0.35s ease-in-out;
        }

        .launch-overlay.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .launch-overlay.closing {
            pointer-events: none;
            opacity: 0;
            transform: scale(0.96);
        }

        .launch-carousel {
            flex: 1;
            position: relative;
            overflow: hidden;
        }

        .launch-slides {
            list-style: none;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: flex;
            transition: transform 0.4s ease;
            will-change: transform;
        }

        .launch-slide {
            position: relative;
            flex: 0 0 100%;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            overflow: hidden;
        }

        .launch-logo {
            position: absolute;
            top: 10%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }

        .launch-logo img {
            width: 1.32rem;
            height: auto;
            display: block;
        }

        .slide-1::before {
            content: '';
            position: absolute;
            inset: 0;
            opacity: 1;
            pointer-events: none;
            background: #000 url('/skin/img/start1.png') no-repeat center top;
            background-size: 100% auto;
        }

        .slide-2::before {
            content: '';
            position: absolute;
            inset: 0;
            opacity: 1;
            pointer-events: none;
            background: #000 url('/skin/img/start2.png') no-repeat center top;
            background-size: 100% auto;
        }
        .slide-3::before {
            content: '';
            position: absolute;
            inset: 0;
            opacity: 1;
            pointer-events: none;
            background: #000 url('/skin/img/start3.png') no-repeat center top;
            background-size: 100% auto;
        }
        .slide-4::before {
            content: '';
            position: absolute;
            inset: 0;
            opacity: 1;
            pointer-events: none;
            background: #000 url('/skin/img/start4.png') no-repeat center top;
            background-size: 100% auto;
        }
        .slide-5::before {
            content: '';
            position: absolute;
            inset: 0;
            opacity: 1;
            pointer-events: none;
            background: #000 url('/skin/img/start5.png') no-repeat center top;
            background-size: 100% auto;
        }
        .slide-6::before {
            content: '';
            position: absolute;
            inset: 0;
            opacity: 1;
            pointer-events: none;
            background: #000 url('/skin/img/start6.png') no-repeat center top;
            background-size: 100% auto;
        }
        .slide-7::before {
            content: '';
            position: absolute;
            inset: 0;
            opacity: 1;
            pointer-events: none;
            background: #000 url('/skin/img/start7.png') no-repeat center top;
            background-size: 100% auto;
        }
        .slide-8::before {
            content: '';
            position: absolute;
            inset: 0;
            opacity: 1;
            pointer-events: none;
            background: #000 url('/skin/img/start8.png') no-repeat center top;
            background-size: 100% auto;
        }

        .launch-indicators {
            position: absolute;
            left: 50%;
            bottom: 1.35rem;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 0.12rem;
            padding: 0.08rem 0.18rem;
        }

        .launch-dot {
            width: 0.06rem;
            height: 0.06rem;
            border-radius: 50%;
            background: #fff;
            opacity: 0.2;
            transition: opacity 0.25s ease;
        }

        .launch-enter {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0.7rem;
            width: 60%;
            max-width: 3.8rem;
            height: 0.46rem;
            border-radius: 0.04rem;
            border: 0.015rem solid rgba(255, 255, 255, 0.52);
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            font-size: 0.14rem;
            letter-spacing: 0.02rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.1rem;
            opacity: 0.8;
            -webkit-tap-highlight-color: transparent;
        }

        .launch-enter:active {
            background: rgba(255, 255, 255, 0.18);
        }

        .launch-enter-icon {
            width: 0;
            height: 0;
            border-left: 0.07rem solid transparent;
            border-right: 0.07rem solid transparent;
            border-top: 0.08rem solid #fff;
            margin-top: -0.07rem;
            animation: launchArrowPulse 1.6s ease-in-out infinite;
        }
        @keyframes launchArrowPulse {
            0%, 100% {
                transform: translateY(0.02rem);
                opacity: 0.6;
            }
            50% {
                transform: translateY(0.07rem);
                opacity: 1;
            }
        }

        /* 设计稿 375px，1rem = 100px，换算方法：px值 ÷ 100 = rem值 */
        .popup-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            background: rgba(0, 0, 0, 0.5);
            animation: fadeIn 0.3s ease;
            padding: 0.2rem 0;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .category-popup {
            width: 90%;
            max-width: 4.2rem;
            max-height: 85vh;
            margin: auto;
            background: #fff;
            border-radius: 0.16rem;
            box-shadow: 0 0.08rem 0.32rem rgba(0, 0, 0, 0.3);
            overflow: hidden;
            transform: translateY(0);
            animation: slideUp 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        @keyframes slideUp {
            from {
                transform: translateY(0.2rem);
            }

            to {
                transform: translateY(0);
            }
        }

        .popup-header {
            padding: 0.18rem;
            border-bottom: 0.01rem solid #e2e8f0;
            position: relative;
            background: linear-gradient(to bottom, #fff, #f8fafc);
            flex-shrink: 0;
        }

        .popup-title {
            font-size: 0.18rem;
            font-weight: 700;
            color: #1e293b;
            text-align: center;
        }

        .close-btn {
            position: absolute;
            right: 0.16rem;
            top: 50%;
            transform: translateY(-50%);
            background: #f1f5f9;
            border: none;
            font-size: 0.24rem;
            color: #64748b;
            cursor: pointer;
            width: 0.32rem;
            height: 0.32rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            -webkit-tap-highlight-color: transparent;
        }
        .close-btn:active {
            background: #e2e8f0;
        }

        .search-box {
            padding: 0.16rem;
            background: #fff;
            border-bottom: 0.01rem solid #e2e8f0;
            flex-shrink: 0;
        }

        .search-input {
            width: 100%;
            padding: 0.12rem 0.16rem;
            border: 0.01rem solid #cbd5e1;
            border-radius: 0.08rem;
            font-size: 0.14rem;
            outline: none;
            transition: all 0.3s;
            background: #f8fafc;
            color: #1e293b;
            -webkit-tap-highlight-color: transparent;
        }
        .search-input::placeholder {
            color: #94a3b8;
        }
        .search-input:focus {
            border-color: #253043;
            background: #fff;
        }

        .category-levels {
            display: flex;
            flex: 1;
            overflow: hidden;
            background: #f8fafc;
        }

        .category-column {
            flex: 1;
            height: 4rem;
            max-height: 50vh;
            overflow-y: auto;
            background: #fff;
            -webkit-overflow-scrolling: touch;
        }
        .category-column:nth-child(1) {
            background: #f8fafc;
        }
        .category-column:nth-child(2) {
            background: #fff;
        }
        .category-column:nth-child(3) {
            background: #f8fafc;
        }

        .category-item {
            padding: 0.14rem 0.16rem;
            font-size: 0.14rem;
            cursor: pointer;
            transition: all 0.2s;
            color: #475569;
            border-bottom: 0.01rem solid #f1f5f9;
            -webkit-tap-highlight-color: transparent;
        }
        .category-item:hover {
            background: #f1f5f9;
        }
        .category-item.active {
            background: #253043;
            color: #fff;
            font-weight: 600;
        }

        .popup-footer {
            padding: 0.16rem;
            background: #fff;
            border-top: 0.01rem solid #e2e8f0;
            flex-shrink: 0;
        }

        .submit-btn {
            width: 100%;
            height: 0.48rem;
            color: #fff;
            border: none;
            border-radius: 0.1rem;
            font-size: 0.16rem;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.3s;
            background: #253043;
            -webkit-tap-highlight-color: transparent;
            outline: none;
        }

        .submit-btn:active {
            background: #1f2937;
        }
        .submit-btn:hover {
            background: var(--hover-color);
        }

        .zc {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgb(0, 0, 0, 0.5);
        }

        /* 导航容器 */
        .nav-container {
            width: 100%;
            background: #f8f9fa;
            padding: 0.1rem 0;
            overflow-x: auto;
            /* 允许横向滚动 */
            white-space: nowrap;
            /* 禁止换行 */
            border-radius: 0.12rem;
        }

        /* 导航菜单 */
        .nav-menu {
            display: inline-block;
            list-style: none;
        }

        /* 导航项 */
        .nav-item {
            display: inline-block;
        }

        /* 导航链接 */
        .nav-link {
            text-decoration: none;
            color: #888;
            font-size: 0.16rem;
            font-weight: 500;
            padding: 0.08rem 0.12rem;
            border-radius: 0.04rem;
            transition: all 0.3s ease;
        }

        /* 悬停效果 */
        .nav-link:hover {
            background: #e9ecef;
            color: #007bff;
        }

        /* 活动状态 */
        .nav-link.active {
            background: #007bff;
            color: white;
        }

        .nav-container {
            -webkit-overflow-scrolling: touch;
            /* 启用弹性滚动 */
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE/Edge */
        }

        .nav-container::-webkit-scrollbar {
            display: none;
            /* WebKit备用方案 */
        }

        /* 分类卡片列表容器 */
        .cate-cards {
            padding: 0.12rem;
            display: flex;
            flex-direction: column;
            gap: 0.12rem;
        }

        /* 单个卡片 */
        .cate-card {
            background: #fff;
            border-radius: 0.12rem;
            overflow: hidden;
            box-shadow: 0 0.08rem 0.24rem rgba(0, 0, 0, 0.06);
        }

        /* 轮播区域（16:9 高度，可按需改） */
        .cate-card .cate-swiper {
            width: 100%;
            height: 56vw;
            /* 接近 9:16 比例的视觉 */
            max-height: 5.2rem;
            /* 防止超高大屏 */
            overflow: hidden;
        }

        .cate-card .cate-swiper .slides li img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* 文案块 */
        .cate-meta {
            padding: 0.14rem 0.16rem 0.16rem;
            background: #f8fafc;
        }

        .cate-title {
            font-size: 0.18rem;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 0.06rem;
        }

        .cate-sub {
            font-size: 0.13rem;
            color: #6b7280;
        }

        .cate-cta {
            margin-top: 0.12rem;
            display: inline-block;
            font-size: 0.14rem;
            color: #111827;
            background: #e5e7eb;
            border-radius: 0.08rem;
            padding: 0.08rem 0.14rem;
        }

        /* 整卡可点击 */
        .cate-link {
            text-decoration: none;
            color: inherit;
            display: block;
        }

        /* 整页堆栈容器：纵向整页滚动 */
        .page-stack {
            height: calc(100vh - var(--foot-h, 0.64rem));
            overflow-y: auto;
            scroll-snap-type: y mandatory;
            -webkit-overflow-scrolling: touch;
        }

        /* 单页：整屏高度，翻页对齐 */
        .page {
            min-height: calc(100vh - var(--foot-h, 0.64rem));
            scroll-snap-align: start;
            display: flex;
            align-items: stretch;
        }

        /* 整页卡片 */
        .page-card {
            background: #fff;
            display: flex;
            flex-direction: column;
            width: 100%;
            text-decoration: none;
            color: inherit;
        }

        /* 大图轮播区域，高度接近 3:4 */
        .page-swiper {
            width: 100%;
            height: min(70%, 5.6rem);
            overflow: hidden;
            background: #fff;
            position: relative;
            touch-action: pan-y pan-x;
        }

        .carousel-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .carousel-slides {
            display: flex;
            height: 100%;
            transition: transform 0.3s ease;
            will-change: transform;
        }

        .carousel-slide {
            flex: 0 0 100%;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
            outline: none;
        }

        .carousel-slide img {
            width: auto;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            display: block;
            object-fit: contain;
            pointer-events: none;
        }

        /* 下半区文案 */
        .page-meta {
            flex: 1;
            background: #f8fafc;
            padding: 0.16rem 0.18rem 0.18rem;
            display: flex;
            flex-direction: column;
        }

        .page-title {
            font-size: .24rem;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 0.06rem;
        }

        .page-sub {
            font-size: 0.12rem;
            color: #6b7280;
        }

        .page-cta {
            margin-top: 0.18rem;
            display: flex;
            width: 0.98rem;
            height: 0.31rem;
            background: #31374C;
            border-radius: 0.02rem;
            font-size: .12rem;
            color: white;
            padding: 0 0.16rem;
            text-align: center;
            align-items: center;
            justify-content: center;
        }

        /* 若顶部还有其他模块，可按需给 .page-stack 增加额外 top 间距 */
        /* 轮播指示器：位置与布局 */
        .carousel-indicators {
            position: absolute;
            left: 50%;
            bottom: 0.14rem;
            transform: translateX(-50%);
            display: flex;
            gap: 0.07rem;
            z-index: 10;
            align-items: center;
        }

        /* 小长方块指示器 */
        .carousel-indicator {
            width: 0.21rem;
            height: 0.02rem;
            background: rgba(0, 0, 0, .5);
            border: none;
            padding: 0;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .carousel-indicator.active {
            background: black;
        }
        
        /* 搜索浮动按钮 */
        .search-float-btn {
            position: fixed;
            right: 0.2rem;
            bottom: 2rem;
            width: 0.45rem;
            height: 0.45rem;
            /* background: #253043; */
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0.04rem 0.16rem rgba(0, 0, 0, 0.1);
            cursor: pointer;
            z-index: 999;
            -webkit-tap-highlight-color: transparent;
            transition: transform 0.2s;
        }
        .search-float-btn:active {
            transform: scale(0.95);
        }
        .search-float-btn img {
            width: 0.28rem;
            height: 0.28rem;
            object-fit: contain;
        }
    </style>
    <script>
        // 设计稿 375px，1rem = 100px，换算方法：px值 ÷ 100 = rem值
        (function(){
            var docEl = document.documentElement;
            var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
            function recalc() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = (clientWidth / 375 * 100) + 'px';
            }
            if (!document.addEventListener) return;
            window.addEventListener(resizeEvt, recalc, false);
            document.addEventListener('DOMContentLoaded', recalc, false);
            recalc();
        })();
    </script>
</head>

<body id="index">
    <div class="launch-overlay" id="launchOverlay" style="display:none;">
        <div class="launch-logo">
            <img src="/skin/img/logo.png" alt="logo" />
        </div>
        <div class="launch-carousel" id="launchCarousel">
            <ul class="launch-slides">
                <li class="launch-slide slide-1"></li>
                <li class="launch-slide slide-2"></li>
                <li class="launch-slide slide-3"></li>
                <li class="launch-slide slide-4"></li>
                <li class="launch-slide slide-5"></li>
                <li class="launch-slide slide-6"></li>
                <li class="launch-slide slide-7"></li>
                <li class="launch-slide slide-8"></li>
            </ul>
            <div class="launch-indicators" id="launchIndicators">
                <span class="launch-dot active" data-index="0"></span>
                <span class="launch-dot" data-index="1"></span>
                <span class="launch-dot" data-index="2"></span>
                <span class="launch-dot" data-index="3"></span>
                <span class="launch-dot" data-index="4"></span>
                <span class="launch-dot" data-index="5"></span>
                <span class="launch-dot" data-index="6"></span>
                <span class="launch-dot" data-index="7"></span>
            </div>
        </div>
        <button type="button" class="launch-enter" id="launchEnterBtn">
            开启循环之旅
            <!-- <span class="launch-enter-icon"></span> -->
        </button>
    </div>
    <!-- 搜索浮动按钮 -->
    <div class="search-float-btn" id="searchFloatBtn">
        <img src="/skin/img/home_search.jpg" alt="搜索" />
    </div>
    
    <!-- 整页卡片堆栈（每个分类一页） -->
    <div class="page-stack" id="catePages">
        {loop $taglist1 $key as $list}
        <?php $current_goods = isset($this->value['taglist1_goods'][$list['Id']]) ? $this->value['taglist1_goods'][$list['Id']] : array(); ?>
        <section class="page">
            <div class="page-card">
                <!-- 顶部大图轮播（该分类下的商品） -->
                <div class="page-swiper" data-carousel>
                    <div class="carousel-wrapper">
                        <div class="carousel-slides">
                            <?php foreach ((array)$current_goods as $k => $p) { ?>
                            <div class="carousel-slide" data-product-id="<?php echo $p['Id']; ?>" style="cursor:pointer;">
                                <img src="<?php echo $p['gthumb']; ?>" alt="<?php echo $p['gname']; ?>" loading="lazy" />
                            </div>
                            <?php } ?>
                        </div>
                        <!-- 指示器 -->
                        <div class="carousel-indicators"></div>
                    </div>
                </div>
                <!-- 文案与按钮 -->
                <div class="page-meta">
                    <div class="page-title">{$list[name]}</div>
                    <div class="page-sub">精选系列</div>
                    <a class="page-cta" href="catgory.php?tag1={$list[Id]}">去看看 →</a>
                </div>
            </div>
        </section>
        {/loop}
    </div>
    <div class="popup-container" style="display:none;">
        <div class="category-popup">

            <div class="popup-header">
                <h3 class="popup-title">产品搜索</h3>
                <button class="close-btn">×</button>
            </div>
            <form action="catgory.php?" method="get">
                <div class="search-box">
                    <input type="text" name="gname" class="search-input" placeholder="请输入产品名称">
                </div>
                <input type="hidden" name="cid" class="level1" />
                <input type="hidden" name="tag1" class="level2" />
                <input type="hidden" name="tag2" class="level3" />
                <div class="category-levels">
                    <div class="category-column" id="level1">

                        {loop $cat2 $key as $list}
                        <div class="category-item" data-id="{$list[Id]}">{$list[name]}</div>
                        {/loop}
                        <!--{loop $cat3 $key as $list}-->
                        <!--<div class="category-item" data-id="{$list[Id]}">{$list[name]}</div>-->
                        <!--{/loop}	-->
                    </div>

                    <div class="category-column" id="level2">
                        {loop $taglist1 $key as $list}
                        <div class="category-item" data-id="{$list[Id]}">{$list[name]}</div>
                        {/loop}
                    </div>
                    <div class="category-column" id="level3">
                        {loop $taglist2 $key as $list}
                        <div class="category-item" data-id="{$list[Id]}">{$list[name]}</div>
                        {/loop}
                    </div>
                </div>

                <div class="popup-footer">
                    <button class="submit-btn">查看商品</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        $("#key").click(function () {
            $(".zc,.popup-container").show();
        });
        document.addEventListener('DOMContentLoaded', function () {

            // 分类选择交互
            const categoryItems = document.querySelectorAll('.category-item');
            categoryItems.forEach(item => {
                item.addEventListener('click', function () {
                    // 移除同列中所有active类
                    const parentColumn = this.parentElement;
                    parentColumn.querySelectorAll('.category-item').forEach(i => {
                        i.classList.remove('active');
                    });

                    // 给当前项添加active类
                    this.classList.add('active');
                    let id = this.getAttribute('data-id');
                    // // 如果是前两列，清空后续列的内容并加载新数据
                    if (parentColumn.id === 'level1') {
                        $(".level1").val(id);
                        // 这里可以添加加载二级分类的逻辑
                    } else if (parentColumn.id === 'level2') {
                        $(".level2").val(id);
                        // 这里可以添加加载三级分类的逻辑
                    } else if (parentColumn.id === 'level3') {
                        $(".level3").val(id);
                        // 这里可以添加加载三级分类的逻辑
                    }
                });
            });

            // 关闭弹窗
            document.querySelector('.close-btn').addEventListener('click', function () {
                document.querySelector('.popup-container').style.display = 'none';
                $(".zc").hide();
            });
            
            // 搜索浮动按钮拖动功能
            (function() {
                var btn = document.getElementById('searchFloatBtn');
                if (!btn) return;
                
                var startX = 0, startY = 0;
                var currentX = 0, currentY = 0;
                var offsetX = 0, offsetY = 0;
                var isDragging = false;
                var hasMoved = false;
                var initialized = false;
                
                function handleStart(e) {
                    isDragging = true;
                    hasMoved = false;
                    
                    // 第一次拖动时，获取按钮当前的实际位置
                    if (!initialized) {
                        var rect = btn.getBoundingClientRect();
                        offsetX = rect.left;
                        offsetY = rect.top;
                        // 切换为 left/top 定位
                        btn.style.left = offsetX + 'px';
                        btn.style.top = offsetY + 'px';
                        btn.style.right = 'auto';
                        btn.style.bottom = 'auto';
                        initialized = true;
                    }
                    
                    var touch = e.touches ? e.touches[0] : e;
                    startX = touch.clientX - offsetX;
                    startY = touch.clientY - offsetY;
                    btn.style.transition = 'none';
                }
                
                function handleMove(e) {
                    if (!isDragging) return;
                    e.preventDefault();
                    
                    var touch = e.touches ? e.touches[0] : e;
                    currentX = touch.clientX - startX;
                    currentY = touch.clientY - startY;
                    
                    // 判断是否移动了足够的距离
                    var diffX = Math.abs(currentX - offsetX);
                    var diffY = Math.abs(currentY - offsetY);
                    if (diffX > 5 || diffY > 5) {
                        hasMoved = true;
                    }
                    
                    // 限制拖动范围
                    var maxX = window.innerWidth - btn.offsetWidth;
                    var maxY = window.innerHeight - btn.offsetHeight;
                    
                    offsetX = Math.max(0, Math.min(currentX, maxX));
                    offsetY = Math.max(0, Math.min(currentY, maxY));
                    
                    btn.style.left = offsetX + 'px';
                    btn.style.top = offsetY + 'px';
                    btn.style.right = 'auto';
                    btn.style.bottom = 'auto';
                }
                
                function handleEnd(e) {
                    if (!isDragging) return;
                    isDragging = false;
                    btn.style.transition = 'transform 0.2s';
                    
                    // 如果没有移动，则视为点击
                    if (!hasMoved) {
                        $('.popup-container').show();
                        $(".zc").show();
                    }
                }
                
                // 触摸事件
                btn.addEventListener('touchstart', handleStart, { passive: true });
                btn.addEventListener('touchmove', handleMove, { passive: false });
                btn.addEventListener('touchend', handleEnd, { passive: true });
                
                // 鼠标事件
                btn.addEventListener('mousedown', handleStart);
                document.addEventListener('mousemove', handleMove);
                document.addEventListener('mouseup', handleEnd);
            })();
            
            // 点击弹窗背景关闭
            $('.popup-container').on('click', function(e) {
                if (e.target === this) {
                    $(this).hide();
                    $(".zc").hide();
                }
            });
        });

        width = $(".xunlist1 li img").width();
        $(".xunlist1 li img").css("height", (width / 100) + "rem");



    </script>
    <script>
        (function(){
            var overlay = document.getElementById('launchOverlay');
            if(!overlay) return;
            var body = document.body;
            var launchKey = 'launchScreenShown';
            var hasShown = false;
            try{
                hasShown = sessionStorage.getItem(launchKey) === '1';
            }catch(e){}
            var slidesWrapper = overlay.querySelector('.launch-slides');
            var dots = overlay.querySelectorAll('.launch-dot');
            var enterBtn = document.getElementById('launchEnterBtn');
            var slideCount = dots.length;
            var currentIndex = 0;
            var startX = 0;
            var startY = 0;
            var active = !hasShown;
            var dragging = false;
            var isHorizontal = null;
            var originalTransition = window.getComputedStyle(slidesWrapper).transition;
            window.launchActive = !hasShown;
            var overlayWidth = overlay.offsetWidth || window.innerWidth;
            var autoTimer = null;
            var autoInterval = 3500;
            var isClosing = false;

            function updateSlide() {
                slidesWrapper.style.transition = originalTransition;
                slidesWrapper.style.transform = 'translateX(' + (-currentIndex * 100) + '%)';
                Array.prototype.forEach.call(dots, function(dot, idx){
                    var distance = Math.abs(idx - currentIndex);
                    var opacity = 0.2;
                    dot.classList.remove('active');
                    if(distance === 0){
                        opacity = 1;
                        dot.classList.add('active');
                    } else if(distance === 1){
                        opacity = 0.6;
                    } else if(distance === 2){
                        opacity = 0.4;
                    }
                    dot.style.opacity = opacity;
                });
            }

            function startAuto(){
                stopAuto();
                if(!active || slideCount <= 1) return;
                autoTimer = setInterval(function(){
                    if(!active) return;
                    var next = currentIndex + 1;
                    if(next >= slideCount){
                        next = 0;
                    }
                    currentIndex = next;
                    updateSlide();
                }, autoInterval);
            }

            function stopAuto(){
                if(autoTimer){
                    clearInterval(autoTimer);
                    autoTimer = null;
                }
            }

            function goTo(index){
                if(index < 0) index = 0;
                if(index >= slideCount) index = slideCount - 1;
                currentIndex = index;
                updateSlide();
            }

            function controlCarousels(start) {
                function isVisible(el){
                    var rect = el.getBoundingClientRect();
                    return rect.width > 0 && rect.height > 0 &&
                        rect.bottom > 0 && rect.top < window.innerHeight &&
                        rect.right > 0 && rect.left < window.innerWidth;
                }
                var carousels = document.querySelectorAll('[data-carousel]');
                Array.prototype.forEach.call(carousels, function(caro){
                    if(caro._carouselControl){
                        if(start){
                            if(isVisible(caro)){
                            caro._carouselControl.start();
                            }
                        }else{
                            caro._carouselControl.stop();
                        }
                    }
                });
            }

            if(hasShown){
                overlay.classList.add('hidden');
                overlay.style.display = 'none';
                body.classList.remove('launch-lock');
                controlCarousels(true);
                return;
            }else{
                overlay.style.display = 'flex';
                body.classList.add('launch-lock');
                startAuto();
            }

            function hideOverlay(){
                if(!active || isClosing) return;
                stopAuto();
                isClosing = true;
                overlay.classList.remove('hidden');
                overlay.style.display = 'flex';
                overlay.classList.add('closing');
                body.classList.remove('launch-lock');
                active = false;
                window.launchActive = false;
                controlCarousels(true);
                try{
                    sessionStorage.setItem(launchKey, '1');
                }catch(e){}
                document.dispatchEvent(new Event('launchHidden'));
            }

            function showOverlay(){
                if(active) return;
                if(isClosing){
                    isClosing = false;
                }
                overlay.style.display = 'flex';
                overlay.classList.remove('hidden');
                overlay.classList.remove('closing');
                body.classList.add('launch-lock');
                active = true;
                window.launchActive = true;
                controlCarousels(false);
                startAuto();
            }

            Array.prototype.forEach.call(dots, function(dot){
                dot.addEventListener('click', function(){
                    var idx = parseInt(this.getAttribute('data-index'), 10) || 0;
                    goTo(idx);
                });
            });

            if(enterBtn){
                enterBtn.addEventListener('click', hideOverlay);
            }

            function onTouchStart(e){
                if(!active) return;
                var touch = e.touches ? e.touches[0] : e;
                startX = touch.clientX;
                startY = touch.clientY;
                dragging = true;
                isHorizontal = null;
                overlayWidth = overlay.offsetWidth || window.innerWidth || 1;
                slidesWrapper.style.transition = 'none';
                stopAuto();
            }

            function onTouchMove(e){
                if(!active || !dragging) return;
                var touch = e.touches ? e.touches[0] : e;
                var diffX = touch.clientX - startX;
                var diffY = touch.clientY - startY;

                if(isHorizontal === null){
                    if(Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 10){
                        isHorizontal = true;
                    } else if(Math.abs(diffY) > Math.abs(diffX) && Math.abs(diffY) > 10){
                        isHorizontal = false;
                    } else {
                        return;
                    }
                }

                if(isHorizontal){
                    e.preventDefault();
                    var offsetPercent = (-currentIndex * 100) + (diffX / overlayWidth * 100);
                    var maxPercent = 20;
                    var minPercent = -(slideCount - 1) * 100 - 20;
                    if(offsetPercent > maxPercent){
                        offsetPercent = maxPercent;
                    }
                    if(offsetPercent < minPercent){
                        offsetPercent = minPercent;
                    }
                    slidesWrapper.style.transform = 'translateX(' + offsetPercent + '%)';
                }
            }

            function onTouchEnd(e){
                if(!active || !dragging) return;
                dragging = false;
                slidesWrapper.style.transition = originalTransition;
                var touch = e.changedTouches ? e.changedTouches[0] : e;
                var diffX = touch.clientX - startX;
                var diffY = touch.clientY - startY;

                if(isHorizontal){
                    var threshold = overlay.offsetWidth * 0.25;
                    if(Math.abs(diffX) > threshold){
                        if(diffX < 0 && currentIndex < slideCount - 1){
                            currentIndex++;
                        } else if(diffX > 0 && currentIndex > 0){
                            currentIndex--;
                        }
                    }
                    updateSlide();
                }

                if(isHorizontal === false){
                    if(diffY < -60){
                        hideOverlay();
                    } else if(diffY > 60){
                        hideOverlay();
                    }
                } else if(isHorizontal === null) {
                    if(diffY < -60 || diffY > 60){
                        hideOverlay();
                    }
                }

                if(!isHorizontal && (diffY < -60 || diffY > 60)){
                    hideOverlay();
                }

                isHorizontal = null;
                startAuto();
            }

            overlay.addEventListener('touchstart', onTouchStart, {passive: true});
            overlay.addEventListener('touchmove', onTouchMove, {passive: false});
            overlay.addEventListener('touchend', onTouchEnd, {passive: true});

            overlay.addEventListener('mousedown', function(e){
                e.preventDefault();
                onTouchStart(e);
            });
            overlay.addEventListener('mousemove', function(e){
                if(!dragging) return;
                onTouchMove(e);
            });
            overlay.addEventListener('mouseup', onTouchEnd);
            overlay.addEventListener('mouseleave', function(e){
                if(dragging) onTouchEnd(e);
            });

            overlay.addEventListener('transitionend', function(e){
                if(e.target !== overlay) return;
                if(overlay.classList.contains('closing')){
                    overlay.classList.remove('closing');
                    overlay.classList.add('hidden');
                    overlay.style.display = 'none';
                    isClosing = false;
                }
            });

            updateSlide();
            controlCarousels(false);
            startAuto();
        })();
    </script>
    <script type="text/javascript">
        // 自定义轮播组件
        (function(){
            function initCarousel(carouselEl) {
                var slidesEl = carouselEl.querySelector('.carousel-slides');
                var indicatorsEl = carouselEl.querySelector('.carousel-indicators');
                if (!slidesEl || !indicatorsEl) return;

                var slides = slidesEl.querySelectorAll('.carousel-slide');
                var totalSlides = slides.length;
                if (totalSlides === 0) return;

                var currentIndex = 0;
                var startX = 0;
                var startY = 0;
                var currentX = 0;
                var currentY = 0;
                var isDragging = false;
                var isHorizontalSwipe = null; // null: 未确定, true: 水平, false: 垂直
                var autoPlayTimer = null;

                // 创建指示器
                function createIndicators() {
                    indicatorsEl.innerHTML = '';
                    for (var i = 0; i < totalSlides; i++) {
                        var indicator = document.createElement('button');
                        indicator.className = 'carousel-indicator';
                        if (i === 0) indicator.classList.add('active');
                        indicator.setAttribute('data-index', i);
                        indicator.addEventListener('click', function() {
                            var index = parseInt(this.getAttribute('data-index'));
                            handleIndicatorClick(index);
                        });
                        indicatorsEl.appendChild(indicator);
                    }
                }

                // 更新指示器
                function updateIndicators() {
                    var indicators = indicatorsEl.querySelectorAll('.carousel-indicator');
                    indicators.forEach(function(indicator, index) {
                        if (index === currentIndex) {
                            indicator.classList.add('active');
                        } else {
                            indicator.classList.remove('active');
                        }
                    });
                }

                // 更新轮播位置
                function updateSlide() {
                    var translateX = -currentIndex * 100;
                    slidesEl.style.transform = 'translateX(' + translateX + '%)';
                    updateIndicators();
                }

                // 跳转到指定幻灯片
                function goToSlide(index) {
                    if (index < 0 || index >= totalSlides) return;
                    currentIndex = index;
                    updateSlide();
                }

                // 自动播放
                function startAutoPlay() {
                    // 如果已经有定时器，先清除
                    if (autoPlayTimer) {
                        clearInterval(autoPlayTimer);
                    }
                    if (window.launchActive) {
                        return;
                    }
                    // 如果正在拖拽，不启动自动播放
                    if (isDragging) return;
                    autoPlayTimer = setInterval(function() {
                        // 再次检查是否正在拖拽
                        if (isDragging) return;
                        currentIndex = (currentIndex + 1) % totalSlides;
                        updateSlide();
                    }, 3000);
                }

                function stopAutoPlay() {
                    if (autoPlayTimer) {
                        clearInterval(autoPlayTimer);
                        autoPlayTimer = null;
                    }
                }

                function resetAutoPlay() {
                    stopAutoPlay();
                    setTimeout(function() {
                        startAutoPlay();
                    }, 500);
                }

                // 触摸事件处理
                function handleTouchStart(e) {
                    isDragging = true;
                    isHorizontalSwipe = null; // 重置滑动方向判断
                    var touch = e.touches ? e.touches[0] : e;
                    startX = touch.clientX;
                    startY = touch.clientY;
                    currentX = startX;
                    currentY = startY;
                    slidesEl.style.transition = 'none';
                    // 暂停自动播放
                    if (autoPlayTimer) {
                        clearInterval(autoPlayTimer);
                        autoPlayTimer = null;
                    }
                }

                function handleTouchMove(e) {
                    if (!isDragging) return;
                    var touch = e.touches ? e.touches[0] : e;
                    currentX = touch.clientX;
                    currentY = touch.clientY;
                    
                    var diffX = currentX - startX;
                    var diffY = currentY - startY;
                    
                    // 判断滑动方向（如果还未确定）
                    if (isHorizontalSwipe === null) {
                        var absX = Math.abs(diffX);
                        var absY = Math.abs(diffY);
                        // 如果水平滑动距离明显大于垂直滑动，则判定为水平滑动
                        if (absX > absY && absX > 10) {
                            isHorizontalSwipe = true;
                        } else if (absY > absX && absY > 10) {
                            isHorizontalSwipe = false;
                        }
                    }
                    
                    // 只有水平滑动时才阻止默认行为并处理轮播
                    if (isHorizontalSwipe === true) {
                        e.preventDefault();
                        var translateX = -currentIndex * 100 + (diffX / carouselEl.offsetWidth * 100);
                        slidesEl.style.transform = 'translateX(' + translateX + '%)';
                    }
                    // 如果是垂直滑动，不阻止默认行为，让页面自然滚动
                }

                function handleTouchEnd(e) {
                    if (!isDragging) return;
                    
                    // 只有水平滑动时才处理轮播切换
                    if (isHorizontalSwipe === true) {
                        slidesEl.style.transition = 'transform 0.3s ease';
                        
                        var diffX = currentX - startX;
                        var threshold = carouselEl.offsetWidth * 0.2;

                        if (Math.abs(diffX) > threshold) {
                            if (diffX > 0 && currentIndex > 0) {
                                goToSlide(currentIndex - 1);
                            } else if (diffX < 0 && currentIndex < totalSlides - 1) {
                                goToSlide(currentIndex + 1);
                            } else {
                                updateSlide();
                            }
                        } else {
                            updateSlide();
                        }
                        
                        // 延迟恢复自动播放，避免立即触发
                        setTimeout(function() {
                            startAutoPlay();
                        }, 500);
                    }
                    
                    // 重置状态
                    isDragging = false;
                    isHorizontalSwipe = null;
                }

                // 绑定事件
                carouselEl.addEventListener('touchstart', handleTouchStart, { passive: true });
                carouselEl.addEventListener('touchmove', handleTouchMove, { passive: false });
                carouselEl.addEventListener('touchend', handleTouchEnd, { passive: true });
                
                // 鼠标事件（桌面端）- 主要处理水平滑动
                carouselEl.addEventListener('mousedown', function(e) {
                    handleTouchStart(e);
                    e.preventDefault(); // 阻止默认行为，避免拖拽图片
                });
                carouselEl.addEventListener('mousemove', function(e) {
                    if (isDragging) {
                        handleTouchMove(e);
                        // 鼠标事件强制判定为水平滑动（因为桌面端通常不需要垂直滚动）
                        if (isHorizontalSwipe === null) {
                            isHorizontalSwipe = true;
                        }
                    }
                });
                carouselEl.addEventListener('mouseup', handleTouchEnd);
                carouselEl.addEventListener('mouseleave', handleTouchEnd);

                // 点击指示器时暂停自动播放
                function handleIndicatorClick(index) {
                    if (autoPlayTimer) {
                        clearInterval(autoPlayTimer);
                        autoPlayTimer = null;
                    }
                    goToSlide(index);
                    setTimeout(function() {
                        startAutoPlay();
                    }, 500);
                }

                // 初始化
                createIndicators();
                updateSlide();
                // 不在这里启动自动播放，等待可见性检测
                
                // 返回控制函数供外部使用
                carouselEl._carouselControl = {
                    start: startAutoPlay,
                    stop: stopAutoPlay
                };
            }

            // 分批次加载分类页并按需初始化轮播
            $(function(){
                (function () {
                    var BATCH_SIZE = 4; // 每次加载的页数
                    var container = document.getElementById('catePages');
                    if (!container) return;

                    // 收集并移除现有的所有分类页
                    var allPages = Array.prototype.slice.call(container.querySelectorAll('.page'));
                    if (allPages.length === 0) return;
                    container.innerHTML = '';

                    // 底部触发器
                    var sentinel = document.createElement('div');
                    sentinel.id = 'loadMoreSentinel';
                    sentinel.style.height = '0.01rem';
                    sentinel.style.width = '100%';
                    container.appendChild(sentinel);

                    // 轮播初始化（仅对新增节点）
                    function initCarousels(rootEl) {
                        var carousels = rootEl.querySelectorAll ? rootEl.querySelectorAll('[data-carousel]') : [];
                        Array.prototype.forEach.call(carousels, function(carouselEl) {
                            initCarousel(carouselEl);
                        });
                    }
                    
                    // 使用 Intersection Observer 检测轮播图可见性
                    var carouselObserver = new IntersectionObserver(function(entries) {
                        entries.forEach(function(entry) {
                            var carouselEl = entry.target;
                            if (carouselEl._carouselControl) {
                                if (entry.isIntersecting) {
                                    // 轮播图进入视口，开始自动播放
                                    carouselEl._carouselControl.start();
                                } else {
                                    // 轮播图离开视口，停止自动播放
                                    carouselEl._carouselControl.stop();
                                }
                            }
                        });
                    }, {
                        threshold: 0.5  // 当50%的内容可见时触发
                    });

                    var loaded = 0;
                    function loadNextBatch() {
                        var end = Math.min(loaded + BATCH_SIZE, allPages.length);
                        for (var i = loaded; i < end; i++) {
                            var page = allPages[i];
                            container.insertBefore(page, sentinel);
                            initCarousels(page);
                            
                            // 为新加载的轮播图添加可见性监听
                            var carousels = page.querySelectorAll('[data-carousel]');
                            Array.prototype.forEach.call(carousels, function(carousel) {
                                carouselObserver.observe(carousel);
                            });
                        }
                        loaded = end;
                    }

                    // 首批加载
                    loadNextBatch();

                    // 观察器：靠近底部继续加载
                    var io;
                    try {
                        io = new IntersectionObserver(function (entries) {
                            entries.forEach(function (e) {
                                if (e.isIntersecting) {
                                    if (loaded < allPages.length) {
                                        loadNextBatch();
                                    } else if (io) {
                                        io.disconnect();
                                    }
                                }
                            });
                        }, { root: container, rootMargin: '2rem', threshold: 0 });
                        io.observe(sentinel);
                    } catch (err) {
                        // 兼容不支持 IO 的环境：一次性加载剩余
                        while (loaded < allPages.length) loadNextBatch();
                    }
                })();
            });
        })();

        $(".jifen").each(function () {
            let a = parseInt($(this).text());
            $(this).text(a);
        });
        (function () {
            var foot = document.querySelector('.tabbar') || document.querySelector('.yh-nav') || document.querySelector('footer');
            var h = foot ? foot.offsetHeight : 64;
            document.documentElement.style.setProperty('--foot-h', (h / 100) + 'rem');
        })();
        
        // 轮播图点击跳转
        $(document).on('click', '.carousel-slide[data-product-id]', function() {
            var productId = $(this).attr('data-product-id');
            if(productId) {
                window.location.href = 'goods.php?id=' + productId;
            }
        });
    </script>
    {include(foot)}
</body>

</html>